<template>
    <div>
        <!--    <el-button type="success" size="mini" @click="appendRootMenu">
      添加祖节点
    </el-button>-->
        <!--    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>

        <span>
          <el-button type="primary" size="mini" @click="updateOneMenu(data)">
            修改节点
          </el-button>
          <el-button
            v-if="data.menuType != 'F'"
            type="success"
            size="mini"
            @click="appendOneMenu(data)"
          >
            添加孩子
          </el-button>
          <el-button
            type="warning"
            size="mini"
            @click="() => removeCountrySAndChildrenById(data)"
          >
            删除节点以及孩子
          </el-button>
        </span>
      </span>
    </el-tree>-->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="appendRootMenu">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
            </el-col>
            <!--      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>-->
        </el-row>

        <el-table
            v-if="refreshTable"
            v-loading="loading"
            :height="650"
            :data="data"
            row-key="menuId"
            :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="100">
                <template slot-scope="scope">
                    <i :class="'fa ' + scope.row.icon"></i>
                    <!--          <svg-icon :icon-class="scope.row.icon || 'star'" />-->
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
            <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope">
                    <!--          <dict-tag
            :options="dict.type.sys_normal_disable"
            :value="scope.row.status"
          />-->
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="updateOneMenu(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.menuType != 'F'" size="mini" type="text" icon="el-icon-plus" @click="appendOneMenu(scope.row)"
                        >新增</el-button
                    >
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="removeCountrySAndChildrenById(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或修改菜单对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="400">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上级菜单" label-width="100px">
                            <TreeSelect
                                v-model="form.parentId"
                                :options="menuOptions"
                                :normalizer="normalizer"
                                :show-count="true"
                                placeholder="选择上级菜单"
                            />
                            <!-- <el-tree
                                ref="treeAdd"
                                :data="menuOptions"
                                :props="defaultProps"
                                @node-click="handleNodeClick"
                            ></el-tree>-->
                            <!-- <elTreeNew :data="menuOptions"></elTreeNew>-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" prop="menuType" label-width="100px">
                            <el-radio-group v-model="form.menuType">
                                <!--                <el-radio label="M">目录</el-radio>-->
                                <el-radio label="C">菜单</el-radio>
                                <el-radio label="F">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="名称" prop="name" label-width="100px">
                            <el-input v-model="form.name" placeholder="请输入名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="100px">
                            <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
                            <span slot="label">
                                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                权限字符
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum" label-width="100px">
                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item prop="path" label-width="100px">
                            <span slot="label">
                                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                路由地址
                            </span>
                            <el-input v-model="form.path" placeholder="请输入路由地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item prop="component" label-width="100px">
                            <span slot="label">
                                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                组件路径
                            </span>
                            <el-input v-model="form.component" placeholder="请输入组件路径" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label-width="100px">
                            <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
                            <span slot="label">
                                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                路由参数
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label="菜单图标" prop="icon" label-width="100px">
                            <el-input v-model="form.icon" placeholder="请输入菜单图标" />
                            <!--              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input
                  slot="reference"
                  v-model="form.icon"
                  placeholder="点击选择图标"
                  readonly
                >
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                    class="el-input__icon"
                    style="height: 32px; width: 16px"
                  />
                  <i
                    v-else
                    slot="prefix"
                    class="el-icon-search el-input__icon"
                  />
                </el-input>
              </el-popover>-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label-width="100px">
                            <span slot="label">
                                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                是否缓存
                            </span>
                            <el-radio-group v-model="form.isCache">
                                <el-radio label="0">缓存</el-radio>
                                <el-radio label="1">不缓存</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label-width="100px">
                            <span slot="label">
                                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                是否外链
                            </span>
                            <el-radio-group v-model="form.isFrame">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label-width="100px">
                            <span slot="label">
                                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                显示状态
                            </span>
                            <el-radio-group v-model="form.visible">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label-width="100px">
                            <span slot="label">
                                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                菜单状态
                            </span>
                            <el-radio-group v-model="form.status">
                                <el-radio label="是" value="0" />
                                <el-radio label="否" value="1" />
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getDataList, addMenuTree, updataMenuTree, deleteMenuTree } from '@/api/menuTree'
// import Treeselect from '@riophae/vue-treeselect'
// import elTreeNew from '@/utils/elTreeNew/elTreeNew'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { newTreeData } from '@/utils/common'

export default {
    name: 'menuTree',
    components: {
        // Treeselect
        // elTreeNew
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 重新渲染表格状态
            refreshTable: true,
            //显示menu树，树的所有数据
            data: [],
            showSearch: true,
            // 是否展开，默认全部折叠
            isExpandAll: false,
            parentId: '',
            title: '弹出框',
            open: false,
            // 菜单树选项，不包括按钮级别数据
            /*treeInit: {
                menuId: 0,
                name: '主目类'
            },*/
            menuOptions: [],
            form: {
                menuType: 'C'
            },
            // 表单校验
            rules: {
                name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
                orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
                path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
            },
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    created() {
        this.getInit()
    },
    methods: {
        getInit() {
            getDataList().then((res) => {
                this.data = res.data.menusData
                this.menuOptions = []
                const menu = { menuId: 0, name: '主类目', children: [] }
                // const menu = { menuId: this.treeInit.menuId, name: this.treeInit.name, children: [] }
                menu.children = res.data.menusData

                this.menuOptions.push(menu)
                this.menuOptions = newTreeData(this.menuOptions)
            })
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.menuId,
                label: node.name,
                children: node.children
            }
        },
        /*handleNodeClick(node) {
            this.$refs.treeAdd.$children[0].node.parent.childNodes[0].expanded = false
            this.form.parentId = node.menuId
            this.treeInit.name = node.name
            this.getInit()
        },
        treeInitData() {
            this.treeInit = {
                menuId: 0,
                name: '主目类'
            }
        },*/
        menuOpen() {},
        menuClose() {},
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.menuId != undefined) {
                        updataMenuTree(this.form).then((res) => {
                            // this.getInit();
                            // this.open = false;
                            location.reload()
                            this.$message(res.data.msg)
                        })
                    } else {
                        this.form.parentId = this.parentId
                        addMenuTree(this.form).then((res) => {
                            // this.getInit();
                            // this.open = false;
                            location.reload()
                            this.$message(res.data.msg)
                        })
                    }
                    this.rest()
                }
            })
            // location.reload()
        },
        rest() {
            this.form = {
                menuType: 'C'
            }
        },
        cancel() {
            this.open = false
            this.rest()
        },
        updateOneMenu(data) {
            this.rest()
            this.title = '修改'
            this.form = data
            this.open = true
        },
        appendRootMenu() {
            this.rest()
            this.title = '增加根目录'
            this.form.parentId = 0
            this.open = true
        },
        /** 展开/折叠操作 */
        toggleExpandAll() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            this.$nextTick(() => {
                this.refreshTable = true
            })
        },
        appendOneMenu(data) {
            this.rest()
            this.title = '新增'
            this.parentId = data.menuId
            this.open = true
        },
        removeCountrySAndChildrenById(data) {
            deleteMenuTree(data.menuId).then((res) => {
                this.$message(res.data.msg)
                // this.getInit();
                location.reload()
            })
        }
    }
}
</script>

<style lang="less">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
//el-dialog的总体样式，不知道为什么放到其他地方就不起作用
.el-dialog {
    border-radius: 20px;
    opacity: 0.9;
    background-color: antiquewhite;
}
.el-table {
    padding: 20px 20px 20px 20px;
}
</style>
